<template>
  <div>
    <div class="task-page">
      <div class="task-top">
        <div class="teak-top-city" @click="state.citySwitchBool = true">
          <i></i>
          <strong>{{ store.cityValue }}</strong>
          <span></span>
        </div>
        <input type="text" readonly placeholder="请输入想要搜索的内容" />
        <router-link to="/message/systemList" class="task-icon-message" />
      </div>
      <Banner />
      <div class="task-title">
        <h3>最新任务</h3>
        <div class="task-position-pop" @click="state.positionTypeBool = true">
          {{ state.positionValue || "职位类型" }}<span></span>
        </div>
        <div class="task-screen-pop">筛选<span></span></div>
      </div>
      <TaskList :taskList="taskList" />

      <!-- 切换城市弹窗 -->
      <van-popup
        v-model:show="state.citySwitchBool"
        position="top"
        duration="0"
        :style="{ width: '100%', height: '100%' }"
      >
        <CitySwitch />
      </van-popup>

      <!-- 职位类型弹窗 -->
      <van-popup
        v-model:show="state.positionTypeBool"
        position="top"
        duration="0"
        :style="{ width: '100%', height: '100%' }"
      >
        <PositionType />
      </van-popup>
    </div>
    <FooterTabbar />
  </div>
</template>

<script setup lang="ts">
import TaskList from "../../components/list/TaskList";
import FooterTabbar from "../../components/FooterTabbar.vue";
import Banner from "./components/Banner.vue";
import CitySwitch from "./components/CitySwitch.vue";
import PositionType from "./components/PositionType.vue";
import Screen from "./components/Screen.vue";
import { reactive, provide } from "vue";
//引入pinia
import { taskStore } from "../../store/task.ts";
const store = taskStore();

const taskList = reactive([{ id: 1 }, { id: 2 }]);
const state = reactive({
  citySwitchBool: false,
  positionTypeBool: false,
  positionValue: "",
});
// 注册父组件的方法
const closeCitySwitch = (name: String) => {
  if (name) {
    // 如果有name，就把他设置为默认name
    store.setCityValue(name);
  }
  state.citySwitchBool = false;
};
const closePositionType = (name: any) => {
  if (name) {
    console.log(name)
    // 如果有name，就把他设置为默认name
    state.positionValue = name;
  }
  state.positionTypeBool = false;
};
provide("popup", {
  closeCitySwitch,
  closePositionType,
});
</script>

<style lang="scss" scoped>
.task-page {
  background: #f9f9f9;
  padding: 0 0.59rem 3rem;
  min-height: calc(100vh - 3rem);
  .task-top {
    display: flex;
    align-items: center;
    padding: 0.5rem 0 0.91rem;
    .teak-top-city {
      display: flex;
      align-items: center;
      i {
        width: 1.04rem;
        height: 1.01rem;
        background: url("@/assets/img/icon/icon-place.png") no-repeat;
        background-size: 100%;
      }
      strong {
        font-size: 0.8rem;
        font-weight: 500;
        color: #333;
        margin-left: 0.1rem;
      }
      span {
        margin: 0 0.6rem 0 0.2rem;
        display: inline-block;
        border-left: 0.18rem solid transparent;
        border-right: 0.18rem solid transparent;
        border-top: 0.36rem solid #333;
      }
    }
    input {
      flex: 1;
      height: 1.71rem;
      background: #e9e9e9 url("@/assets/img/icon/icon-search.png") 0.35rem
        0.3rem no-repeat;
      background-size: 9%;
      border: 0.03px solid #ededed;
      border-radius: 0.85rem;
      font-size: 0.69rem;
      font-weight: 300;
      color: #999;
      padding-left: 2rem;
    }
    .task-icon-message {
      width: 1.31rem;
      height: 1.28rem;
      background: url("@/assets/img/icon/icon-remind.png") no-repeat;
      background-size: 100%;
      margin-left: 0.27rem;
    }
  }
  .task-title {
    display: flex;
    align-items: center;
    margin-bottom: 0.67rem;
    margin-top: 0.5rem;
    h3 {
      flex: 1;
      font-size: 0.96rem;
      line-height: 0.96rem;
      font-weight: bold;
      color: #333;
    }
    .task-screen-pop {
      font-size: 0.75rem;
      line-height: 0.75rem;
      font-weight: 300;
      color: #666;
      margin-left: 0.56rem;
      span {
        display: inline-block;
        border-left: 0.18rem solid transparent;
        border-right: 0.18rem solid transparent;
        border-top: 0.36rem solid #333;
        margin-left: 0.2rem;
      }
    }
    .task-position-pop {
      span {
        display: inline-block;
        border-left: 0.18rem solid transparent;
        border-right: 0.18rem solid transparent;
        border-top: 0.36rem solid #333;
        margin-left: 0.2rem;
      }
    }
  }
}
</style>
